<template>
  <view>
    <template v-if="myLesson.length">
      <view class="hd" @click="goMyLesson">
        <view class="title">我的课程</view>
        <view class="more">更多 <uv-icon name='arrow-right' color="#B8B8B8" size='26rpx'></uv-icon></view>
      </view>
      <view class="myClass">
        <view class="item" v-for="(item,index) in myLesson" :key="index">
          <view class="head">
            <view class="logo">
              <image :src="setUrl(item.thumb)" mode="aspectFill" class="img"></image>
            </view>
            <view class="right height">
              <view class="boder">
                <view class="title line2">{{ item.title }}</view>
              </view>
              <view class="bottom">
                <view class="timeNumber">课时: {{ item.sectionCount }} </view>
              </view>
            </view>
          </view>
          <view class="foot">
            <view></view>
            <view class="button">
              <view class="next" @click="goAssess(item)">评论课程</view>
              <view class="next" @click="goDetail(item)">进入学习</view>
            </view>
          </view>
        </view>
      </view>
    </template>
    <template v-if="recommendLesson.length">
      <view class="hd" @click="goMore">
        <view class="title">推荐课程</view>
        <view class="more">更多 <uv-icon name='arrow-right' color="#B8B8B8" size='26rpx'></uv-icon></view>
      </view>
      <view class="myClass">
        <course :detail='item' v-for="(item,index) in recommendLesson" :key="index"></course>
      </view>
    </template>
  </view>
</template>

<script setup>
import course from '../course.vue';
import { ref } from 'vue';
import { setUrl } from '@/common';
import { get } from '@/api';
import { onLoad } from '@dcloudio/uni-app';

let myLesson = ref([]);
let recommendLesson = ref([]);

onLoad(() => {
  init();
})

function getWatchLesson(){
  const params = {
    page: 1,
    pagePer: 2
  }
  get('/api/lesson/getWatchLesson', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      myLesson.value = data.data;
    }
  })
}
function getRecommendLesson(){
  const params = {
    limit: 3,
    page: 1
  }
  get('/api/lesson/getRecommendLesson', params).then(res => {
    if(res.code == 1){
      const data = res.data;
      recommendLesson.value = data;
    }
  })
}
function init(){
  getWatchLesson();
  getRecommendLesson();
}
function goMyLesson(){
  uni.navigateTo({
    url: '/pages/research/myList'
  });
}
function goMore(){
  uni.navigateTo({
    url: '/pages/research/more'
  });
}
function goAssess(row){
  uni.navigateTo({
    url: `/pages/research/assess?id=${row.id}`
  });
}
function goDetail(row){
  uni.navigateTo({
    url: `/pages/research/detail?id=${row.id}`
  });
}
defineExpose({
  init
})
</script>

<style lang="scss" scoped>
  .myClass{
    padding: 0 30rpx;
    .item{
      width: 100%;
      padding: 40rpx 0;
      border-bottom: 1px solid #EFEFEF;
      &:last-child{
        border-bottom: 0;
      }
      .foot{
        width: 100%;
        padding-top: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .button{
          display: flex;
          align-items: center;
          .next{
            width: 190rpx;
            height: 60rpx;
            line-height: 60rpx;
            background: #ff484514;
            border-radius: 15rpx;
            border: 1px solid #FF3B38;
            color: #FF3B38;
            font-weight: 500;
            font-size: 26rpx;
            text-align: center;
            margin-left: 18rpx;
          }
        }
      }
      .head{
        width: 100%;
        display: flex;
        align-items: flex-start;
        .right{
          flex: 1;
          padding-left: 20rpx;
          position: relative;
          &.height{
            height: 171rpx;
          }
          .bottom{
            position: absolute;
            left: 20rpx;
            bottom: 40rpx;
            .timeNumber{
              font-weight: 400;
              font-size: 24rpx;
              color: #797979;
              padding-top: 12rpx;
            }
          }
          .datas{
            display: flex;
            align-items: center;
            width: 100%;
            padding-top: 12rpx;
            .money{
              display: flex;
              align-items: center;
              padding-right: 16rpx;
              &:last-child{
                padding-right: 0;
              }
              .font{
                font-weight: 400;
                font-size: 24rpx;
                color: #E43222;
                padding-left: 10rpx;
              }
              .img{
                width: 24rpx;
                height: 24rpx;
                font-size: 0;
              }
            }
          }
          .tag{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            width: 100%;
            padding-top: 12rpx;
            .items{
              font-weight: 400;
              font-size: 24rpx;
              color: #000000;
              height: 44rpx;
              line-height: 44rpx;
              border-radius: 44rpx;
              padding: 0 30rpx;
              background-color: #F0F0F0;
              margin-right: 10rpx;
              margin-bottom: 10rpx;
            }
          }
          .line{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .line2{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .desc{
            font-weight: 400;
            font-size: 24rpx;
            color: #686868;
            padding-top: 12rpx;
          }
          .boder{
            display: flex;
            align-items: flex-start;
            .title{
              font-weight: 400;
              font-size: 28rpx;
              color: #000000;
              flex: 1;
              width: 0;
              padding-right: 10rpx;
            }
          }
        }
        .logo{
          width: 260rpx;
          height: 171rpx;
          font-size: 0;
          border-radius: 10rpx;
          overflow: hidden;
        }
      }
    }
  }
  .hd{
    width: 100%;
    padding: 0 30rpx;
    margin-top: 36rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title{
      font-weight: 500;
      font-size: 32rpx;
      color: #2B2B2B;
    }
    .more{
      font-weight: 400;
      font-size: 28rpx;
      color: #B8B8B8;
      display: flex;
      align-items: center;
    }
  }
</style>